<extend name="Layout/index" />
<block name="link">
	<link rel="stylesheet" href="__PUBLIC__/component/page.css">
	<style>
		.select{
			margin-top:20px;
		}
	</style>
</block>
<block name="breadcrumb-01">
	<li>
		<i class="icon-home home-icon"></i>
		<a href="#">首页</a>
	</li>
	<li class="active">属性管理</li>
</block>

<block name="breadcrumb-02">
	<div>
		<ul class="nav nav-pills" style="height:50px" role="tablist">
			  <li role="presentation" class="active"><a href="<{:U('Property/index')}>">属性列表</a></li>
			  <li role="presentation" ><a href="<{:U('Property/addIndex')}>">属性添加</a></li>
			  <!-- <li role="presentation"><a href="#">Messages</a></li> -->
		</ul>	
	</div>
</block>
<block name="main">
		<!-- <div class="col-md-3"><a href="<{:U('Property/addIndex')}>"><button class="btn btn-success">属性添加</button></a></div>
		<div class="col-md-3"><a href="javascript:void(0)"><button class="btn btn-info btn-look">属性查看</button></a></div>
		<div class="col-md-3"></div>
		<div class="col-md-3"></div> -->
		
		<div class="col-md-4 col-md-push-3 select" style="display:none">
			<div class="col-md-6">请选择你要查看的分类属性</div> 
			<select name="cid" id="">
				<volist name="arr" id="firstCat">
						<option <notempty name="firstCat['child']">disabled</notempty> value="<{$firstCat['id']}>">
					       <php>echo $firstCat['html'].$firstCat['name']</php>
						</option>		
						<volist name="firstCat['child']" id="secCat">
							<option <notempty name="secCat['child']">disabled</notempty> value="<{$secCat['id']}>" >
							   <php>echo $secCat['html'].$secCat['name']</php>
							</option>

							<volist name="secCat['child']" id="thdCat">
							<option <notempty name="thdCat['child']">disabled</notempty> value="<{$thdCat['id']}>" >
							   <php>echo $thdCat['html'].$thdCat['name']</php>
							</option>
						</volist>
						</volist>	
					</volist>	
		 </select>
		</div>
		
	    <img id="loading" src="__PUBLIC__/Home/img/loading3.gif" alt="" style="position:fixed;left:50%;top:60%;display:none">
		<table class="table table-striped table-bordered table-hover center">
			<thead>
				<tr align='left' bgcolor="#ccc">
					<th>属性名</th>
					<th>属性值</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			<!-- 	<tr>
					<td><{$vo.id}></td>
					<td><{$vo.certtext}></td>
					<td>
						<a href="<{:U('WebConfig/del',array('id'=>$vo['id']))}>"><button type="button" class="btn btn-danger">删除</button></a>
						<a href="<{:U('WebConfig/edit',array('id'=>$vo['id']))}>"><button type="button" class="btn btn-success">编辑</button></a>
					</td>
				</tr>	 -->
			</tbody>
					
		</table>


		<!--添加属性的摸态框-->
		<div class="modal fade" id="addBox" data-proid=''>
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"></button>
		        <h4 class="modal-title"><span id="add-title" style="color:blue" ></span>添加</h4>
		      </div>
		      <div class="modal-body" >
		          
					<!--具体的表单-->
					<form class="form-horizontal" role="form">

					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-2 control-label">属性值:</label>
					    <div class="col-sm-5">
					      <div class="input-group">
						      <input type="text" class="form-control modal_val">
						       <span class="input-group-btn "> <button class="modal-btn-cancel btn btn-danger btn-xs" type="button" style="display:none">取消</button> <span style="display:none" class="error text-danger">属性值不能为空</span> </span>
						    </div>
					    </div>
					  </div>


				</form>
		      </div>
		      <div class="modal-footer">
		      	<span class="btn btn-info addConbtn">继续添加</span>
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <span class="btn btn-primary addBoxConfirm">确认添加</span>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
	    </div><!-- /.modal -->
	

		<!--编辑属性的摸态框-->
	    <div class="modal fade" id="editBox" data-proid=''>
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"></button>
		        <h4 class="modal-title">属性修改</h4>
		      </div>
		      <div class="modal-body" >
		          
					<!--具体的表单-->
					<form class="form-horizontal" role="form" id="editForm" method="post" action="<{:U('Property/doeditPro')}>">
					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-2 control-label">属性名:</label>
					    <div class="col-sm-5">
					      <div class="input-group">
						      <input type="text" class="form-control" name="property">
						       <span class="input-group-btn "><span style="display:none" class="error text-danger">属性名不能为空</span> </span>
						    </div>
					    </div>
					  </div>

					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-2 control-label">属性值:</label>
					    <div class="col-sm-5">
					      <div class="input-group">
						      <input type="text" class="form-control" name="val">
						       <span class="input-group-btn "> <button class=" btn btn-danger btn-xs" type="button">彻底删除</button> <span style="display:none" class="error text-danger">属性值不能为空</span> </span>
						    </div>
					    </div>
					  </div>	
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" id="cancelEdit">取消</button>
		        <span class="btn btn-primary editBoxConfirm">确认修改</span>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
	    </div><!-- /.modal -->
</block>
<block name="end">
<script>
	$('select').find('option:disabled').css({
		color:'#5286F0'
	})

	$('select').find('option:not(:disabled)').css({
		color:'blue'
	})
	$('.btn-look').click(function(){
		$('.select').show();
	})
	
	$('.select').show();
	$.ajax({
			url:"<{:U('Property/ajaxShowPro')}>",
			data:{cid:$('.select').find(':selected').val()},
			dataType:'html',
			type:'post',
			success:function(data){
				$('#loading').hide();
				$('table.center tbody').html(data);

			},
			beforeSend:function(){
				$('#loading').show();
			}
	})

	$('.select').change(function(){
		var cid = $(this).find(':selected').val(); //分类id
		$.ajax({
			url:"<{:U('Property/ajaxShowPro')}>",
			data:{cid:cid},
			dataType:'html',
			type:'post',
			success:function(data){
				$('#loading').hide();
				$('table.center tbody').html(data);

			},
			beforeSend:function(){
				$('#loading').show();
			}
		})

	})

	$('.center').delegate('.btn-delete','click',function(){
		var $tr = $(this).closest('tr'),
			$proid = $(this).closest('td').prev().find('span').data('proid'),
			proName = $tr.find('td').eq(0).html(),
			valid = [],
			proid = '',
			html = '',
			$proIdArr = $tr.find('td').eq(1).children('span');
			// console.log($proIdArr);
			$.each($proIdArr,function(i){
				proid = $(this).data('proid');
				valid.push($(this).data('valid'));
			})
			for(var i = 0 ; i < valid.length;i++){
				html+=valid[i]+' '
			}

		if(confirm('你确定要删除'+proName+'属性:\r\n值:'+html)){
			$.ajax({
				url:"<{:U('Property/delPro')}>",
				data:{proid:$proid},
				type:'post',
				success:function(data){
					if(data.code==1){
						alert('删除失败!');
					}else{
						$tr.remove();
						alert('删除成功!');
					}
				},
			})
		}
	}).delegate('.btn-edit','click',function(){
		var $spans = $(this).closest('tr').find('td').eq(1).children('span');
			proid = $spans.eq(0).data('proid'),
			valid = $spans.eq(0).data('valid');

		$('#editBox').modal({backdrop:'static'});
		$.ajax({
			url:"<{:U('Property/getProByid')}>",
			data:{proid:proid},
			type:'post',
			beforeSend:function(){

			},
			success:function(data){
				
				$('#editForm').html(data);

			}
		})
	}).delegate('.btn-add','click',function(){
		var $tr    = $(this).closest('tr'),
			$tds   = $tr.find('td');
			$spans =  $tds.eq(1).children('span'),
			propertyId =$spans.eq(0).data('proid'),
			proName = $tds.eq(0).html();

		//弹出摸态框
		$('#addBox .modal-title').html(proName+'属性值添加');
		$('#addBox').data('proid',propertyId);
		$('#addBox').modal({'backdrop':'static'});
	})


	function checkVal(target){
		if(target.val().length==0){
			$(target).next().find('span').show();
			return false;
		}else{
			$(target).next().find('span').hide();
			return true;
		}
	}
	$('#addBox').delegate('.modal-btn-cancel','click',function(){
		$(this).closest('.form-group').remove();
	}).delegate('.addConbtn','click',function(){
		$('#addBox .modal-body .form-horizontal').append($('<div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">属性值:</label><div class="col-sm-5"><div class="input-group"><input type="text" class="modal_val form-control"><span class="input-group-btn "> <button class="modal-btn-cancel btn btn-danger btn-xs" type="button">取消</button> <span style="display:none" class="error text-danger">属性值不能为空</span> </span></div></div></div>'));
	}).delegate('.modal_val','blur',function(){
		checkVal($(this));


	//点击保存修改之后的触发事件
	}).delegate('.addBoxConfirm','click',function(){
		$.each($('.modal_val'),function(){
			checkVal($(this));
		})

		if($('#addBox .error:visible').length==0){


				var arr = [];
				// fd = new FormData();
				$.each($('.modal_val'),function(i){
					arr.push({value:$(this).val()});
				})
				

				// fd.append('val[]',arr);
				//向服务器发送数据进行保存
				$.ajax({
					type:'post',
					url:"<{:U('Property/addVal')}>",
					data:{proid:$('#addBox').data('proid'),val:arr},
					// processData:false,
					// contentType:false,
					success:function(data){
						if(data.code==1){

							//失败
							alert('失败!');
							$('#addBox').modal('hide');
						}else{

							//成功
							alert('成功!');
							$.ajax({
								url:"<{:U('Property/ajaxShowPro')}>",
								data:{cid:$('.select').find(':selected').val()},
								dataType:'html',
								type:'post',
								success:function(data){
									$('#loading').hide();
									$('table.center tbody').html(data);

								},
								beforeSend:function(){
									$('#loading').show();
								}
						   })
							$('#addBox').modal('hide');

						}
					}
				})
			}
	})

	function checkVal2(){
		var flag = true;
		$('.val-edit').each(function(i){
			if($(this).val().length===0){
				$(this).next().children('span').show();
				flag = false;
			}else{
				$(this).next().children('span').hide();
			}
				
		})
		return flag;
	}


	function checkProName(target){

		// return;
		if($('.pronameinput').val().length===0){
			$('.pronameinput').siblings('span').children('span').show();
			return false;
		}else{
			$('.pronameinput').siblings('span').children('span').hide();
			return true;
		}
	}


	//删除属性值
	$('#editbox .modal-body').delegate('.btn-delete','click',function(){
		var proid = $(this).data('proid');
		$.ajax({
			url:"<{:U('Property/delVal')}>",
			type:'post',
			data:{valid:$(this).data('valid')},
			success:function(data){

				//删除成功之后
				$.ajax({
					url:"<{:U('Property/getProByid')}>",
					data:{proid:proid},
					type:'post',
					beforeSend:function(){

					},
					success:function(data){
						
						$('#editForm').html(data);

					}
				})

				alert(data.mess);

			}
		})
	//保存修改
	})

	$('#cancelEdit').click(function(){

		//点击取消之后实时刷新数据
		$('#editBox').modal('hide');
		$.ajax({
			url:"<{:U('Property/ajaxShowPro')}>",
			data:{cid:$('.select').find(':selected').val()},
			dataType:'html',
			type:'post',
			success:function(data){
				$('#loading').hide();
				$('table.center tbody').html(data);

			},
			beforeSend:function(){
				$('#loading').show();
			}
		})
	})


	//点击确认将会向服务器请求保存数据
	$('.editBoxConfirm').click(function(){
		var val= {},
		proid,
		proname;
		checkVal2();
		checkProName();

		if($('#editBox .error:visible').length===0){
			$.each($('.val-edit'),function(i){
			val[$(this).data('valid')] = $(this).val();
			proid = $(this).data('proid');
			})

			proname = $('.pronameinput').val();

			$.ajax({
				type:'post',
				url:"<{:U('Property/doeditPro')}>",
				data:{'val':val,'proid':proid,'proname':proname},
				success:function(data){
					alert(data.mess);
						$.ajax({
							url:"<{:U('Property/ajaxShowPro')}>",
							data:{cid:$('.select').find(':selected').val()},
							dataType:'html',
							type:'post',
							success:function(data){
								$('#loading').hide();
								$('table.center tbody').html(data);

							},
							beforeSend:function(){
								$('#loading').show();
							}
						})
					$('#editBox').modal('hide');
				}
			})
		}
		
		
	})

	$('.editBoxConfirm').click(function(){
		checkVal2();
	})
</script>


</block>	